<template>
  <Content title="不良品处理">
    <view class="handling-defective-products">
      <view class="main-box">
        <template v-if="data && data.length > 0">
          <scroll-view
            class="home-list"
            scroll-y
            @scrolltolower="scrollBottom"
            :refresher-triggered="triggered"
            :refresher-threshold="100"
            @refresherrestore="onRestore"
            refresher-enabled
            @refresherrefresh="onRefresh"
            :ower-threshold="0"
          >
            <view class="info-box" v-for="(item, index) in data" :key="item.id">
              <view class="title" @click="toPath(item)">
                <text class="txt u-line-1"
                  >申请单号 {{ item.defectiveNumber }}</text
                >
                <view class="tag-box">
                  <u-tag
                    shape="circle"
                    :text="item.state"
                    :borderColor="getColor(item.state)"
                    :bgColor="getColor(item.state)"
                  ></u-tag>
                  <uni-icons type="right" size="14" />
                </view>
              </view>
              <view class="text-box">
                <text class="label">工单号:</text>
                <text class="value">{{ item.workCode }}</text>
              </view>
              <view class="text-box">
                <text class="label">产品编号:</text>
                <text class="value">{{ item.materialCode }}</text>
              </view>
              <view class="text-box">
                <text class="label">产品名称:</text>
                <text class="value">{{ item.materialName }}</text>
              </view>
              <view class="text-box">
                <text class="label">模具编号:</text>
                <text class="value">{{ item.moldCode }}</text>
              </view>
              <view class="text-box">
                <text class="label">模具名称:</text>
                <text class="value">{{ item.moldName }}</text>
              </view>
              <view class="text-box">
                <text class="label">计划数量:</text>
                <text class="value">{{ item.planProduceQuantity }}</text>
              </view>
              <view class="text-box">
                <text class="label">生产数量:</text>
                <text class="value">{{ item.produceQuantity }}</text>
              </view>
              <view class="text-box">
                <text class="label">不良数量:</text>
                <text class="value">{{ item.outNumTotal }}</text>
              </view>
              <view class="text-box">
                <text class="label">计划开始时间:</text>
                <text class="value">{{ item.workStartTime }}</text>
              </view>
            </view>

            <view class="loading animation-scale-up" v-if="loading"></view>
            <view class="scroll-no-data" v-if="noData">已拉到最底部</view>
          </scroll-view>
        </template>
        <template v-else>
          <view class="info-box">
            <Empty />
          </view>
        </template>
      </view>
    </view>
  </Content>
</template>

<script>
import MyModal from "@/components/myModal";
import Content from "@/components/content/index";
import Empty from "@/components/empty";
import { setPageData, getPageData } from "@/store/user";
import { listMixins } from "@/mixins/list";
export default {
  mixins: [listMixins],
  components: {
    Content,
    Empty,
    MyModal,
  },
  data() {
    return {
      model: {},
      listUrl: "/dms/mobileEnd/queryPadSelfCheckList",
      search: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  computed: {},
  mounted() {},
  methods: {
    getColor(item2) {
      return item2 == "待排产"
        ? "#E5963A"
        : item2 == "已排产"
        ? "#998BF2"
        : item2 == "下发"
        ? "#6BBEE1"
        : item2 == "生产"
        ? "#73D8A6"
        : item2 == "中断"
        ? "#D48B3E"
        : item2 == "暂停"
        ? "#D8BE49"
        : item2 == "完成"
        ? "#4668E2"
        : item2 == "转产中"
        ? "#E794C9"
        : item2 == "转产完成"
        ? "#C25BC6"
        : item2 == "调机中"
        ? "#D8B2F2"
        : item2 == "调机完成"
        ? "#8698F6"
        : item2 == "拆模"
        ? "#EA709F"
        : "#31b099";
    },
    toPath(item) {
      console.log("11111111111");
      setPageData(item);
      uni.navigateTo({
        url: "/pages/staging/handling-defective-products/details",
        animationType: "pop-in",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.handling-defective-products {
  height: 100%;
  overflow: auto;

  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .main-box {
    height: 100%;
    overflow: auto;
  }
  .home-list {
    height: 100%;
  }

  .title {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    padding: 0 40rpx 20rpx 40rpx;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;

    .txt {
      flex: 1;
    }

    .tag-box {
      display: flex;
      align-items: center;
    }
  }

  .content-top {
    padding: 40rpx;

    .state {
      color: #f17a0a;
      margin-bottom: 20rpx;
    }
  }

  .text-box {
    display: flex;
    margin-bottom: 20rpx;

    .label {
      color: #666;
    }
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;

    .label {
      margin: 0 20rpx;
    }
  }
  .number-davities-box {
    text-align: center;
    .header {
      margin-bottom: 20rpx;
    }
    .item-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
  }
  .btn-box {
    display: flex;
    .btn-box-item {
      padding: 20rpx;
      flex: 1;
      text-align: center;
      border-top: 1px solid #e0e0e0;
      border-right: 1px solid #e0e0e0;
      color: #67aee7;
    }
  }
}
</style>
